<!-- Keywords Overview Tab -->
<div id="tabKeywordsOverview" class="tab-content">
    <div class="endpoint-section">
        <h2>Keywords Management</h2>
        <p>Manage keywords across your prompts database.</p>

        <div class="form-group">
            <button class="api-button" onclick="loadAllKeywords()">
                Load All Keywords
            </button>
        </div>

        <div id="keywords-list" style="margin: 20px 0; max-height: 400px; overflow-y: auto;"></div>
    </div>
</div>

<!-- Keywords Manage Tab -->
<div id="tabKeywordsManage" class="tab-content">
    <div class="endpoint-section">
        <h2>
            <span class="endpoint-method post">POST</span>
            <span class="endpoint-path">/api/v1/prompts/keywords/ - Add Keyword</span>
        </h2>
        <p>Add a new keyword to the system.</p>

        <div class="form-group">
            <label for="keywordAdd_text">Keyword Text <span class="required">*</span>:</label>
            <input type="text" id="keywordAdd_text" placeholder="Enter keyword">
        </div>

        <button class="api-button" onclick="addKeyword()">
            Add Keyword
        </button>

        <h3>cURL Command:</h3>
        <pre id="keywordAdd_curl">---</pre>

        <h3>Response:</h3>
        <pre id="keywordAdd_response">---</pre>
    </div>

    <div class="endpoint-section">
        <h2>
            <span class="endpoint-method get">GET</span>
            <span class="endpoint-path">/api/v1/prompts/keywords/ - List Keywords</span>
        </h2>
        <p>Get all active keywords.</p>

        <button class="api-button" onclick="listKeywords()">
            List All Keywords
        </button>

        <h3>cURL Command:</h3>
        <pre id="keywordsList_curl">---</pre>

        <h3>Response:</h3>
        <pre id="keywordsList_response">---</pre>
    </div>

    <div class="endpoint-section">
        <h2>
            <span class="endpoint-method delete">DELETE</span>
            <span class="endpoint-path">/api/v1/prompts/keywords/{keyword_text} - Delete Keyword</span>
        </h2>
        <p>Soft delete a keyword.</p>

        <div class="form-group">
            <label for="keywordDelete_text">Keyword to Delete <span class="required">*</span>:</label>
            <input type="text" id="keywordDelete_text" placeholder="keyword-text">
        </div>

        <button class="api-button btn-danger" onclick="deleteKeyword()">
            Delete Keyword
        </button>

        <h3>cURL Command:</h3>
        <pre id="keywordDelete_curl">---</pre>

        <h3>Response:</h3>
        <pre id="keywordDelete_response">---</pre>
    </div>
</div>
<script src="js/keywords.js"></script>

<!-- Keywords Sync Tab (Placeholder) -->
<div id="tabKeywordsSync" class="tab-content">
    <div class="endpoint-section">
        <h2>Keyword Synchronization & Migration</h2>
        <p>This feature is planned for future implementation.</p>
        <p>It will allow synchronizing keywords across different content types (media, notes, chats, prompts).</p>
    </div>
</div>
